<template>
  <div>
    <Header>
      <span slot="center">我的</span>
      <van-icon name="setting-o" slot="right" size="22" />
    </Header>
    <Scroll class="content">
      <header>
        <div @click="login" class="login_btn" v-if="!LoginState">登录/注册</div>
        <div class="login-info" v-if="LoginState">
          <div class="avatar"><img src="@/assets/images/profile/tea7_logo.png" alt=""></div>
          <span>茶友{{ userMobile }}</span>
        </div>
      </header>
      <Order v-if="LoginState"></Order>
      <Person :personData="personData"></Person>
      <Person :personData="discountData"></Person>
      <Person :personData="serviceData"></Person>
    </Scroll>
  </div>
</template>

<script>
import Header from '@/components/common/Header.vue';
import Person from '@/components/content/profile/Person.vue';
import Order from '@/components/content/profile/Order.vue';
import Scroll from '@/components/common/Scroll.vue';
import { mapState } from 'vuex';
export default {
  name: "user",
  components: {
    Header,
    Person,
    Order,
    Scroll
  },
  data() {
    return {
      personData: {
        title: '个人中心',
        child: [
          {
            icon: 'iconfont icon-yonghuguanli_huaban',
            message: '我的拼团'
          },
          {
            icon: 'iconfont icon-wujiaoxingkong',
            message: '我的收藏'
          },
          {
            icon: 'iconfont icon-address',
            message: '地址管理',
            router: '/profile/location'
          }
        ]
      },
      discountData: {
        title: '优惠福利',
        child: [
          {
            icon: 'iconfont icon-youhuijuan',
            message: '优惠劵'
          }
        ]
      },
      serviceData: {
        title: '专属服务',
        child: [
          {
            icon: 'iconfont icon-kefu1',
            message: '我的客服'
          },
          {
            icon: 'iconfont icon-gongkaiyijianxiang',
            message: '意见箱'
          },
          {
            icon: 'iconfont icon-jiaruwomen',
            message: '加入我们'
          }
        ]
      }
    }
  },
  methods: {
    login() {
      this.$router.push('/login')
    }
  },
  computed: {
    ...mapState('user', ['LoginState', 'userMobile'])
  }
}
</script>

<style lang='less' scoped>
.content {
  width: 100%;
  height: calc(100vh - 94px);
  overflow: hidden;

  header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 130px;
    -webkit-tap-highlight-color: transparent;
    color: #fff;
    background: url('@/assets/images/profile/cbtopbg.jpg');

    .login_btn {
      background: rgba(255, 181, 0, 0.9);
      padding: 10px 20px;
      color: #fff;
      border-radius: 5px;
      font-size: 16px;
    }

    .login-info {
      display: flex;
      align-items: center;
      flex-direction: column;
      font-size: 18px;
      padding: 5px;

      .avatar {
        width: 75px;
        height: 75px;
        border-radius: 50%;
        overflow: hidden;

        img {
          width: 100%;
        }
      }
    }
  }
}
</style>